$item-width: 30px;
$item-heigth: 25px;
.wb-controller {
    width: 100px;
    height: 100px;
    .controller {
        position: relative;
        .ctr-item-box {
            display: inline-block;
            vertical-align: middle;
            width: $item-width;
            height: $item-heigth;
            // background: #eee;
            background: url(../../../assets/images/icons/btn_ctrl_bg.png) no-repeat center;
            background-size: 100%;
            display: none;
            &.show {
                display: block;
            }
            .ctr-item {
                display: block;
                width: 100%;
                height: 100%;
                cursor: pointer;
                a {
                    display: block;
                    width: 100%;
                    height: 100%;
                    background-size: 70%!important;
                }
                &.MOVE {
                    a {
                        background: url(../../../assets/images/icons/btn_ctrl_plus.png) no-repeat center;
                    }
                    &.active a {
                        background: url(../../../assets/images/icons/btn_ctrl_plus_active.png) no-repeat center;
                    }
                }
                &.MUTE {
                    a {
                        background: url(../../../assets/images/icons/btn_ctrl_mute.png) no-repeat center;
                    }
                    &.active a {
                        background: url(../../../assets/images/icons/btn_ctrl_mute_active.png) no-repeat center;
                    }
                }
                &.GIFT {
                    a {
                        background: url(../../../assets/images/icons/btn_ctrl_gift.png) no-repeat center;
                    }
                    &.active a, &.Normal:hover a {
                        background: url(../../../assets/images/icons/btn_ctrl_gift_active.png) no-repeat center;
                    }
                }
                &.RE {
                    a {
                        background: url(../../../assets/images/icons/btn_ctrl_refresh.png) no-repeat center;
                    }

                    &.active a, &.Normal:hover a {
                        background: url(../../../assets/images/icons/btn_ctrl_refresh_active.png) no-repeat center;
                    }

                }
                &.WB {
                    a {
                        background: url(../../../assets/images/icons/btn_ctrl_wb.png) no-repeat center;
                    }
                    &.active a {
                        background: url(../../../assets/images/icons/btn_ctrl_wb_active.png) no-repeat center;
                    }
                }
                &.OK {
                    a {
                        background: url(../../../assets/images/icons/btn_ctrl_ok.png) no-repeat center;
                    }
                    &.active a, &.Normal:hover a {
                        background: url(../../../assets/images/icons/btn_ctrl_ok_active.png) no-repeat center;
                    }
                }
                &.ALL {
                    a {
                        background: url(../../../assets/images/icons/btn_ctrl_all.png) no-repeat center;
                    }
                    // &:hover a,
                    &.active a {
                        background: url(../../../assets/images/icons/btn_ctrl_all_active.png) no-repeat center;
                    }
                }
            }
            position: absolute;
            &:nth-child(1) {
                left: 32px;
                top: 38px;
            }
            &:nth-child(2) {
                left: 58px;
                top: 25px;
            }
            &:nth-child(3) {
                left: 32px;
                top: 11px;
            }
            &:nth-child(4) {
                left: 58px;
                top: 52px;
            }
            &:nth-child(5) {
                left: 7px;
                top: 52px;
            }
            &:nth-child(6) {
                left: 7px;
                top: 25px;
            }
            &:nth-child(7) {
                left: 32px;
                top: 65px;
            }
        }
    }
}
